<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 v-if="seen">Vue is awesome!</h1>
      <h3 v-else>Oh no 😢</h3>

      <hr />

      <p v-if="filter==='all'">所有列表</p>
      <p v-else-if="filter==='输出'">所有输出列表</p>
      <p v-else-if="filter==='重装'">所有重装列表</p>
      <p v-else>所有支援列表</p>

      <hr />
      <template v-if="seen">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
      </template>
      <!-- <template> 元素当做不可见的包裹元素 -->

      <hr />

      <p>{{msg}}</p>

      <button
        @click="loginType === 'username'? loginType = 'email' : loginType = 'username'"
      >
        toggle</button
      ><br />
      <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="1" />
      </template>
      <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="2" />
      </template>
      <!-- Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染 -->
      <!-- <input> 不会被替换掉——仅仅是替换了它的 placeholder。 -->

      <!-- 通知vue 这两个元素是完全独立的，不要复用它们 -->
      <!-- 只需添加一个具有唯一值的 key attribute 即可 -->

      <hr />
      <h1 v-show="seen">Hello!</h1>
      <h1 v-if="seen">Hello!</h1>
      <!-- v-if 控制的是 要不要渲染这个元素  v-show控制的只是 要不要显示这个元素 -->

      <!-- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 -->

      <ul>
        <!-- <li v-for="n in arr"><span v-if="n%2">{{n}}</span></li> -->
        <!-- <li v-for="n in arr">{{n}}</li> -->
        <template v-for="n in arr">
          <li v-if="n%2">{{n}}</li>
        </template>
      </ul>

      <ul>
        <template v-if="arr.length>=3">
          <li v-for="n in arr">{{n}}</li>
        </template>
      </ul>

      <!-- v-for  -->
      <ul>
        <li v-for="(n,i) of arr">{{n}}-{{i}}</li>
      </ul>
      <ul>
        <li v-for="(value,key,index) of object">
          {{value}} - {{key}} - {{index}}
        </li>
      </ul>
    </div>

    <!-- 

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
变更方法 变异方法   会改变原始数组

理论变更方法 一定不会响应（指针地址没有变化） 上述方法除外
    -->

    <!-- 
map find filter concat slice ....
非变更方法 不会改变原始数组

一定可以响应

     -->

    <!-- app.arr[0] = 10 app.arr.length=1  app.object.xx='yy'  不会响应-->

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          seen: false,
          filter: "all",
          msg: "hello",
          loginType: "username",
          arr: [1, 2, 3, 4, 5],
          object: {
            title: "How to do lists in Vue",
            author: "Jane Doe",
            publishedAt: "2016-04-10",
          },
        },
      });
    </script>
  </body>
</html>
